<template>
  <div style="max-width: 400px; margin: 50px auto;">
    <h2 style="text-align: center; margin-bottom: 30px;">用户登录</h2>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item
        label="用户名"
        prop="username"
        :rules="[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 12, message: '用户名长度在 3-12 个字符之间', trigger: 'blur' }
        ]"
      >
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>

      <el-form-item
        label="密码"
        prop="password"
        :rules="[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6-20 个字符之间', trigger: 'blur' },
          { pattern: /^(?=.*[a-zA-Z])(?=.*\d)/, message: '密码需包含字母和数字', trigger: 'blur' }
        ]"
      >
        <el-input
          v-model="form.password"
          type="password"
          placeholder="请输入密码（含字母和数字）"
          :show-password="showPassword"
        >
          <template #suffix>
            <el-icon @click="showPassword = !showPassword" style="cursor: pointer;">
              <Eye v-if="showPassword" />
              <EyeOff v-else />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="rememberPassword" label="记住密码（7天）" />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          style="width: 100%;"
          @click="handleLogin"
          :loading="isLoading"
        >
          登录
        </el-button>
        <div style="text-align: right; margin-top: 10px;">
          <router-link to="/forgot-password" style="color: #666;">忘记密码？</router-link>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useStore } from '../store'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// 正确导入方式（按需导入）
import { Eye, EyeOff} from '@element-plus/icons-vue'
const form = ref({
  username: '',
  password: ''
})
const showPassword = ref(false)
const rememberPassword = ref(false)
const isLoading = ref(false)
const store = useStore()
const router = useRouter()

// 页面加载时读取记住的密码
onMounted(() => {
  const savedUser = localStorage.getItem('savedUser')
  if (savedUser) {
    form.value = JSON.parse(savedUser)
    rememberPassword.value = true
  }
})

// 登录逻辑
const handleLogin = async () => {
  if (!form.value.username || !form.value.password) {
    ElMessage.warning('请输入用户名和密码')
    return
  }

  isLoading.value = true
  try {
    const success = await store.login(form.value.username, form.value.password)
    if (success) {
      // 处理记住密码
      if (rememberPassword.value) {
        localStorage.setItem('savedUser', JSON.stringify(form.value))
      } else {
        localStorage.removeItem('savedUser')
      }
      ElMessage.success('登录成功')
      router.push('/')
    } else {
      ElMessage.error('用户名或密码错误')
    }
  } finally {
    isLoading.value = false
  }
}
</script>
